<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="referrer" content="always">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>VueTest</title>
    <meta name="keywords">
    <meta name="description">

    <link rel="stylesheet" href="../static/Semantic-UI-CSS-master/semantic.css">
    <script src="../static/Semantic-UI-CSS-master/semantic.js"></script>
    <script src="http://how2j.cn/study/vue.min.js"></script>
    <script src="../static/js/jquery-1.10.2.min.js"></script>
    <script src="http://how2j.cn/study/axios.min.js"></script>
</head>


<div id="div1">
    <a @click="doClick($event,'1')" onclick="return false">111</a>
    <a @click="doClick($event,'2')" onclick="return false">222</a>
    <a @click="doClick($event,'3')" onclick="return false">333</a>
    <a @click="doClick($event,'4')" onclick="return false">444</a>
    <div>{{date.title}}</div>
    <div>date{{date}}</div>
    <div>{{title}}</div>
    <div>{{num}}</div>
</div>

<script>
    var url = "http://localhost:8080/LxCommunity/content/findbykey/";
    new Vue({
        el: '#div1',
        data: {
            date: '',
            title: '',
            num: ''
        },
        methods: {
            doClick: function (e, num) {
                var self = this;

                var url2 = url + num;
                console.log(url2);
                console.log(num);
                self.num = num;
                axios.get(url2).then(function (response) {

                    self.date = response.data;
                    console.dir(self.date);
                    var str = response.data.content.replace(/<[^>]*>/g, "");
                    self.title = str.replace(/&nbsp;/g, "").substring(0, 86);
                    console.dir(self.title);
                });
            }
        }, mounted: function () { //mounted　表示这个 Vue 对象加载成功了
            var self = this;
            axios.get("http://localhost:8080/LxCommunity/content/selAll").then(function (response) {
                self.date = response.data;

                // var str=self.date[8].content;
                // console.log(str);
                // var arr=str.match(/<img.*?(?:>|\/>)/gi);
                // //var src = arr[0].match(/src=[\'\"]?([^\'\"]*)[\'\"]?/i);
                // for(var i=0;i<arr.length;i++){
                //     console.log(str.match(/<img.*?(?:>|\/>)/gi)[0].match(/src=[\'\"]?([^\'\"]*)[\'\"]?/i)[1]);
                // }

            })
        }
    });


    var str = "this is test string" +
        "<img src=\"http:yourweb.com/test.jpg\"width='50' >123 and the end " +
        "<img src=\"所有地址也能匹配.jpg\" /> " +
        "<img src=\"/uploads/attached/image/20120426/20120426225658_92565.png\" alt=\"\" />"
    var arr=str.match(/<img.*?(?:>|\/>)/gi)
    for(var i=0;i<arr.length;i++){
        var src = arr[i].match(/src=[\'\"]?([^\'\"]*)[\'\"]?/i);
        console.log(src[1]);
    }



</script>

</body>
</html>